<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ColumNav example: nextHandler</title>
    <script type="text/javascript" src="../js/yui//utilities.js"></script>
    <script type="text/javascript" src="../js/yui/container_core-min.js"></script>
    <script type="text/javascript" src="../js/carousel_min.js"></script>
    <script type="text/javascript" src="../js/columnav_min.js"></script>
    <link href="../css/examples.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
      try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}
      function ask(type, args, me) {
          var target = args[0];
          if (YAHOO.util.Dom.hasClass(target, 'columnav-has-next')) // ignore directories
              return true;
          if (confirm('Are you sure you want to visit ' + target.href + '?'))
              return true;
          target.focus();
          return false;
      }
      function init() {
          var cn_cfg = {
              prevElement: 'columnav-prev',
              datasource: document.getElementById('sites'),
              nextHandler: ask
          };
          var cn = new YAHOO.extension.ColumNav('columnav', cn_cfg);

          var sv_cfg = { url: location.href, modifier: 'HTML' };
          var sv = new YAHOO.extension.SourceViewer('source', sv_cfg);
      }
      YAHOO.util.Event.addListener(window, 'load', init);
    </script>
    <script type="text/javascript" src="../js/viewsource.js"></script>
    <link href="../css/stringify.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <div id="main">
      <div id="content">
        <p style="float:right"><a href="../">Documentation</a></p>
        <h1>ColumNav</h1>
        <h2>Example</h2>
        <div class="prevButton">
          <a href="javascript:void(0)" id="columnav-prev">&lt; back</a>
        </div>
        <div id="columnav" class="carousel-component">
          <div class="carousel-clip-region">
            <ul class="carousel-list"></ul>
          </div>
        </div>
        <div class="viewsource" id="source"></div>
        <p>The ColumNav above is initialized from the list below. When each menu item is clicked, the function given in the <code>nextHandler</code> configuration property is run. If that function returns <code>true</code>, the menu item behaves in the normal fashion. If <code>false</code>, the action is canceled. The <code>nextHandler</code> function receives three arguments: the custom event type (always the string "onNext"), an array containing the target on which the event was fired and the native MouseEvent object itself, and a reference to the ColumNav instance. the <code>nextHandler</code> can perform any action, and should return <code>true</code> or <code>false</code>.</p>
        <ul id="sites">
          <li><a href="http://www.google.com/">Google</a></li>
          <li><a href="http://www.yahoo.com/">Yahoo</a></li>
          <li>
            <a href="">Other sites</a>
            <ul>
              <li><a href="http://www.youtube.com/">YouTube</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
